import { useRef, useState } from "react";
import { Button, Popconfirm } from "antd";
import ProTable, { ActionType, ProColumns } from "@ant-design/pro-table";
import { PlusOutlined } from "@ant-design/icons";
import QuestionnaireForm from "./questionnaireForm";
import { deleteSurvey, getSurveyList } from "@/services/patient/followUpApi";
import PermissionControl from '@/components/PermissionControl/index';
import { showMsg } from "@/utils/utils";

const QuestionnaireTab = () => {

  const actionRef = useRef<ActionType>();
  const [open, setOpen] = useState<boolean>(false);
  const [editId, setEditId] = useState<string>();

  const columns: ProColumns<PATIENT.SurveyInfo>[] = [
    {
      title: '调研表编号',
      dataIndex: 'survey_id',
      width: '20%',
      hideInTable: true
    },
    {
      title: '调研表名称',
      dataIndex: 'survey_title'
    },
    {
      title: '最近编辑人',
      dataIndex: 'modify_user_name',
      width: '15%'
    },
    {
      title: '更新时间',
      dataIndex: 'update_date',
      width: '15%'
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      width: '15%',
      render: (_, record, idx, action) => (
        <div style={{ display: 'inline-flex', gap: 24 }}>
          <PermissionControl action_id="900901005">
            <a onClick={() => { setEditId(record.survey_id); setOpen(true); }}>编辑</a>
          </PermissionControl>
          <PermissionControl action_id="900901006">
            <Popconfirm placement="topRight" title='确认删除？' onConfirm={async () => {
              if (!record.survey_id) return;
              try {
                await deleteSurvey(record.survey_id);
                showMsg('删除成功', 'success');
                action?.reload();
              } catch (error: any) {
                showMsg(error?.data?.errmsg);
              }
            }}>
              <a>删除</a>
            </Popconfirm>
          </PermissionControl>
        </div >
      )
    }
  ];

  return <>
    <ProTable<PATIENT.SurveyInfo>
      actionRef={actionRef}
      rowKey="survey_id"
      className='mytable'
      options={false}
      search={false}
      bordered
      columns={columns}
      request={async (params) => {
        try {
          const res = await getSurveyList({ ...params });
          return { success: true, data: res.record_list, total: res.sum_record_num };
        } catch (reason) {
          return { success: false, data: [] };
        }
      }}
      toolBarRender={() => [
        <div key="add">
          <PermissionControl action_id="900901004">
            <Button type="primary" icon={<PlusOutlined />} onClick={() => {
              setOpen(true);
            }}>
              新增
            </Button>
          </PermissionControl>
        </div>
      ]}
      pagination={{ showQuickJumper: true }}
    />
    <QuestionnaireForm surveyId={editId} apply={false} open={open} openChange={open => {
      if (!open) {
        actionRef.current?.reload();
        setEditId(undefined);
      }
      setOpen(open);
    }} />
  </>;
};

export default QuestionnaireTab;
